<script lang="ts" setup name="Game2048">
import ChessBoard from '@/components/ChessBoard/index.vue'
import ScorePanel from '@/components/ScorePanel/index.vue'
import TimingPanel from '@/components/TimingPanel/index.vue'
</script>

<template>
  <div id="game-container">
    <!-- 左侧面板展示相关数据 -->
    <div id="panel-container">
      <TimingPanel/>
      <ScorePanel/>
    </div>
    <!-- 右侧游戏的主要操作区域 -->
    <div id="main-container">
      <header>2048 小游戏</header>
      <ChessBoard/>
    </div>
  </div>
</template>

<style lang="less" scoped>
@item-gap: 20px;

#game-container {
  display: grid;
  grid-template-columns: repeat(10, 10vw);
  grid-template-rows: repeat(10, 10vh);
  // grid-row-gap: 20px;
  // grid-column-gap: 20px;

  #panel-container {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 10;

    >:nth-child(2) {
      margin-top: @item-gap;
    }
  }  
  
  #main-container {
    // margin-left: @item-gap;
    margin: 0 auto;
    grid-column-start: 4;
    grid-column-end: 10;
    grid-row-start: 2;
    grid-row-end: 10;
    width: max-content;
    
    >:nth-child(2) {
      margin: 20px auto;
    }
  
    header {
      font-size: 34px;
      text-align: center;
      color: #37474f;
    }
  }  
}
</style>
